<script setup>
import useCityStore from "@/store/modules/city";

const props = defineProps({
  groupData: {
    type: Object,
    default: () => ({}),
  },
});
// 从服务器动态获取侧边的字母索引
const indexList = computed(() => {
  const list = props.groupData.cities.map((item) => item.group);
  list.unshift("#");
  return list;
});
// 监听城市点击
const router = useRouter();
const cityStore = useCityStore();
const cityClick = (city) => {
  // console.log(city);
  cityStore.currentCity = city;
  // 返回到上一级路由
  router.back();
};
</script>

<template>
  <div class="city-group">
    <!-- <template v-for="(group, index) in groupData.cities" :key="index">
      <div class="group-item">
        <h2>{{ group.group }}</h2>
        <div class="list">
          <template v-for="(city, indey) in group.cities" :key="indey">
            <div class="city">{{ city.cityName }}</div>
          </template>
        </div>
      </div>
    </template> -->

    <van-index-bar :sticky="false" :index-list="indexList">
      <van-index-anchor index="热门" />
      <div class="list">
        <template v-for="(city, index) in groupData.hotCities" :key="index">
          <div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
        </template>
      </div>

      <template v-for="(group, index) in groupData.cities" :key="index">
        <van-index-anchor :index="group.group" />
        <template v-for="(city, indey) in group.cities" :key="indey">
          <van-cell :title="city.cityName" @click="cityClick(city)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<style lang="less" scoped>
:deep(.van-index-anchor) {
  font-weight: normal;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
  padding-right: 25px;
  .city {
    width: 70px;
    height: 28px;
    border-radius: 14px;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 28px;
    background-color: #fff4ec;
    margin: 10px 0;
  }
}
</style>
